<script setup lang="ts">
  import { useCssScope } from '@/hooks/use-css-scope'
  import type { SchemaSearchPageProps } from './interface'
  import Search from './search.vue'
  import { ref, computed, reactive, watchEffect, onMounted, onUnmounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { Table } from '@arco-design/web-vue'

  const props = withDefaults(defineProps<SchemaSearchPageProps>(), {
    resetBtnShow: true,
    isSyncQueryString: true
  })

  const selectedKeys = defineModel('selected-keys', {
    type: Array<string | number>
  })

  const cssScope = useCssScope('search-list')
  const route = useRoute()
  const router = useRouter()

  const conditions = ref<Record<string, any> | undefined>({})

  const dataSource = reactive<any>({
    data: [],
    total: 0
  })

  const isMounted = ref(false)

  const loading = ref(false)

  const pn = computed(() => {
    const originQuery = route.query
    return originQuery?.page ? Number(originQuery.page) : 1
  })

  const ps = computed(() => {
    const originQuery = route.query
    return originQuery?.size ? Number(originQuery.size) : 10
  })

  const queryData = async (page: number, size: number, conditions?: Record<string, any>) => {
    loading.value = true
    const resp = await props.doSearch(page, size, conditions)
    dataSource.data = resp.data
    dataSource.total = resp.total
    loading.value = false
  }

  const handlerConditionsChange = (val: Record<string, any> | undefined) => {
    conditions.value = val
  }

  const Refresh = () => {
    queryData(pn.value, ps.value, conditions.value)
  }

  defineExpose({
    Refresh
  })

  onMounted(() => {
    isMounted.value = true
  })

  onUnmounted(() => {
    isMounted.value = false
  })

  watchEffect(() => {
    if (isMounted.value) {
      queryData(pn.value, ps.value, conditions.value)
    }
  })

  const handlerPageChange = (page: number) => {
    const originQuery = route.query
    router.push({
      query: {
        ...originQuery,
        page
      }
    })
  }

  const handlerPageSizeChange = (size: number) => {
    const originQuery = route.query
    router.push({
      query: {
        ...originQuery,
        size
      }
    })
  }
</script>

<template>
  <div :class="cssScope()">
    <div :class="cssScope('-search')">
      <Search
        :search-fields="searchFields"
        :reset-btn-show="resetBtnShow"
        :is-sync-query-string="isSyncQueryString"
        @conditions-change="handlerConditionsChange"
      />
      <slot></slot>
    </div>
    <div :class="cssScope('-table')">
      <Table
        bordered
        :data="dataSource.data || []"
        :loading="loading"
        v-model:selected-keys="selectedKeys"
        :pagination="{
          total: dataSource.total,
          current: pn,
          pageSize: ps,
          showTotal: true,
          size: 'small',
          showPageSize: true
        }"
        @page-change="handlerPageChange"
        @page-size-change="handlerPageSizeChange"
        :scroll="{ y: '100%' }"
        v-bind="{ ...props.table }"
      >
        <template #columns>
          <template v-for="item in columns">
            <Table.Column :title="item.title" :dataIndex="item.dataIndex">
              <template #cell="{ record }">
                <slot :name="item.dataIndex" :record="record">
                  {{ record[item.dataIndex] }}
                </slot>
              </template>
            </Table.Column>
          </template>
        </template>
        <template #empty>
          <div>暂无数据</div>
        </template>
      </Table>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .qw__search-list {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    &-search {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
      overflow-x: scroll;
      overflow-y: hidden;
      scrollbar-width: none;
    }
    &-table {
      flex: 1 1;
      overflow: hidden;
    }
  }
</style>
